import React, { Component } from 'react'
import logo from '@/assets/logo.svg';
import { connect } from 'dva';
import { formatMessage } from 'umi-plugin-locale';
import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';


import styles from './index.less'
import loginImg from '@/assets/login.png'

const appTitle = window.localStorage.getItem("appTitle")


@connect(({ project, loading }) => ({
    project,
    loading: loading.effects['project/fetchPlatformInfo']
}))
class Login extends Component {

    state = {
        loading: false,
    }
    formRef = React.createRef();

    onFinish = values => {
        this.setState({ loading: true })
        this.props.dispatch({
            type: "project/userLogin",
            payload: values,
            callback: res => {
                this.setState({ loading: false })
            }
        })
    };
    onFinishFailed = errorInfo => {
    };

    componentDidMount() {
        this.props.dispatch({
            type: 'project/fetchPlatformInfo',
        })
    }

    render() {
        const { platformInfo } = this.props.project
        const copyright = platformInfo.copyright || "Copyright &copy; 2019 深圳市中兵康佳科技有限公司"
        return (
            <div className={styles.continer}>
                <div className={styles.header}>
                    <img src={logo} alt="" className={styles.imglogo} style={{ width: '64px', margin: '-9px 5px 5px 0' }}></img>
                    <span className={styles.title}>{platformInfo.platformName || formatMessage({ id: 'app.title' })}</span>
                </div>

                <div className={styles.content}>
                    <div className={styles.main}>
                        <div className={styles.title}>欢迎登录</div>

                        <Form
                            ref={this.formRef}
                            name="basic"
                            onFinish={this.onFinish}
                            onFinishFailed={this.onFinishFailed}
                        >
                            <Form.Item
                                name="username"
                                rules={[{ required: true, message: "用户名不能为空" }]}
                            >
                                <Input size="large" prefix={<UserOutlined />} placeholder={formatMessage({ 'id': 'login.username' })} />
                            </Form.Item>
                            <Form.Item
                                name="password"
                                rules={[{ required: true, message: "密码不能为空" }]}
                            >
                                <Input size="large" type="password" prefix={<LockOutlined color="#ccc" />} placeholder={formatMessage({ 'id': 'login.password' })} />
                            </Form.Item>
                            <Form.Item
                                name="loginButton"
                            >
                                <Button loading={this.state.loading} htmlType="submit" type="primary" size="large" block>{formatMessage({ 'id': 'common.button.login' })}</Button>
                            </Form.Item>

                        </Form>
                    </div>
                </div>

                <div className={styles.copyright} dangerouslySetInnerHTML={{ __html: copyright }}></div>

            </div >
        );
    }

}
export default Login